import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';
import { useAppSelector } from '@/hooks/useAppSelector';
import getAssetsFile from '@/utils/pub-use';
import { Image } from 'antd-mobile';
import { RightOutline } from 'antd-mobile-icons';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

const UserInfoComponents = () => {
  const userInfo = useAppSelector((state) => state.userInfo.userInfo);
  return (
    <div className="text-center mt-2">
      <div className="flex justify-center">
        <Image
          width={'80px'}
          src={getAssetsFile('home/settings-avartar.png')}
        />
      </div>
      <div className="mt-2">{userInfo.level_name}</div>
      <div className="opacity-50 text-sm italic">ID: {userInfo.user_id}</div>
    </div>
  );
};
const OperateComponents = () => {
  const navigate = useNavigate();
  const { t } = useTranslation();

  return (
    <div className="flex">
      <div
        onClick={() => navigate('/accountDetail')}
        className="detail flex justify-center flex-col items-center flex-1 bg-[url('/src/assets/image/home/settings-item-bg.png')] bg-no-repeat bg-cover py-8"
      >
        <Image width={'46px'} src={getAssetsFile('home/list-icon.png')} />
        {t('accountDetail')}
      </div>
      <div
        onClick={() => navigate('/invite')}
        className="invite ml-4 flex flex-col justify-center column items-center flex-1 bg-[url('/src/assets/image/home/settings-item-bg.png')] bg-no-repeat bg-cover py-8"
      >
        <Image width={'46px'} src={getAssetsFile('home/invite-icon.png')} />
        {t('inviteCode')}
      </div>
    </div>
  );
};
const SettingsComponents = () => {
  const navigate = useNavigate();

  const { t } = useTranslation();
  const settingsList = [
    {
      title: 'updatePassword',
      path: '/updatePassword',
    },
    {
      title: 'customerService',
      path: '/customerService',
    },
  ];
  return (
    <div className="mt-8">
      <div className="title font-semibold mb-4">{t('settings')}</div>
      <div className="content">
        {settingsList.map((item) => {
          return (
            <div
              key={item.title}
              onClick={() => navigate(item.path)}
              className="flex justify-between items-center py-4 border-t border-b border-white-7"
            >
              <div className="left">{t(item.title)}</div>
              <div>
                <RightOutline />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default function Settings() {
  return (
    <div className="text-white-1 px-3 pb-28">
      <HeaderComponent title="myAccount" />
      <UserInfoComponents />
      <OperateComponents />
      <SettingsComponents />
    </div>
  );
}
